<div id="branch-select-dropdown" class={["dropdown", "is-right", @active && "is-active"]} phx-hook="BranchSelect">
  <div class="dropdown-trigger">
    <%= if connected?(@socket) do %>
      <a class="button" aria-haspopup="true" aria-controls="dropdown-menu" phx-click="toggle_dropdown" phx-target={@myself}>
        <span><%= String.capitalize(@label_type) %>: <span class="has-text-weight-semibold"><%= @label_name %></span></span>
        <span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
      </a>
    <% else %>
      <%= case @label_type do %>
        <% "branch" -> %>
          <a class="button" href={Routes.codebase_path(@socket, :branches, @repo.owner_login, @repo)}>
            <span>Branch: <span class="has-text-weight-semibold"><%= @label_name %></span></span>
            <span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
          </a>
        <% "tag" -> %>
          <a class="button" href={Routes.codebase_path(@socket, :tags, @repo.owner_login, @repo)}>
            <span>Tag: <span class="has-text-weight-semibold"><%= @label_name %></span></span>
            <span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
          </a>
        <% "commit" -> %>
          <a class="button" href={Routes.codebase_path(@socket, :commit, @repo.owner_login, @repo, @revision)}>
            <span>Commit: <span class="has-text-weight-semibold"><%= @label_name %></span></span>
            <span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
          </a>
      <% end %>
    <% end %>
  </div>
  <%= if @active do %>
    <div class="dropdown-menu">
      <nav class="panel">
        <div class="panel-heading">
          <p class="control has-icons-left">
          <input class="input is-small" type="text" placeholder="Filter ..." phx-keyup="filter" phx-target={@myself} />
          <span class="icon is-small is-left">
              <i class="fa fa-filter" aria-hidden="true"></i>
          </span>
          </p>
        </div>
        <p class="panel-tabs">
          <a class={if @tab == :branch, do: "is-active"} phx-click="switch_tab" phx-value-tab="branch" phx-target={@myself}>Branches</a>
          <a class={if @tab == :tag, do: "is-active"} phx-click="switch_tab" phx-value-tab="tag" phx-target={@myself}>Tags</a>
        </p>
        <%= if @tab == :branch do %>
          <%= live_redirect to: Routes.codebase_path(@socket, @action, @repo.owner_login, @repo, @head, @tree_path), class: ["panel-block", @head.oid == @commit.oid && "is-active"] do %>
            <div class="control">
              <span class="head"><%= @head.name %></span>
              <span class="tag is-pulled-right">default</span>
            </div>
          <% end %>
        <% end %>
        <%= for ref <- Enum.filter(@refs, &(&1.type == @tab && String.contains?(&1.name, @filter))) do %>
          <%= live_redirect ref.name, to: Routes.codebase_path(@socket, @action, @repo.owner_login, @repo, ref, @tree_path), class: ["panel-block", ref.oid == @commit.oid && "is-active"] %>
        <% end %>
        <div class="panel-block">
            <%= case @tab do %>
            <% :branch -> %>
              <%= live_redirect "all branches", to: Routes.codebase_path(@socket, :branches, @repo.owner_login, @repo), class: "button is-small is-link is-fullwidth" %>
            <% :tag -> %>
              <%= live_redirect "all tags", to: Routes.codebase_path(@socket, :tags, @repo.owner_login, @repo), class: "button is-small is-link is-fullwidth" %>
            <% end %>
        </div>
      </nav>
    </div>
  <% end %>
</div>
